<template>
    <div class="description">
        <h2 slot="header">请将摄像头对准您想拍摄的方向</h2>
      <div class="video-container">
        <video :src="videoSrc" controls></video>
      </div>
      <div class="play-button">
        <el-button type="primary" @click="playAudio">播放音频</el-button>
      </div>
      <!-- 语音栏 -->
      <div v-if="showVoiceBar" class="voice-bar">
        正在播放语音...
      </div>
      <!-- 语音按钮 -->
      <img class="centered-button" src="@/assets/eye.jpg" @click="startSpeechRecognition">
      <!-- 语音输入弹窗 -->
      <el-dialog title="语音搜索" :visible.sync="showVoiceInput" @close="stopSpeechRecognition" class="voice-dialog" center>
        <div class="voice-input-dialog">
          <el-icon class="voice-icon" name="el-icon-microphone"></el-icon>
          <div class="voice-text">{{ voiceInputStatus }}</div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        videoSrc: require('@/assets/test2.mp4'), // 设置要播放的视频路径
        showVoiceBar: false, // 控制是否显示语音栏
        showVoiceInput: false, // 控制语音输入弹窗显示
        voiceInputStatus: '' // 语音输入状态信息
      };
    },
    methods: {
      playAudio() {
        // 播放音频文件
        const audio = new Audio(require('@/assets/test.mp3'));
        audio.play();
  
        // 显示语音栏
        this.showVoiceBar = true;
  
        // 监听音频播放结束事件，当音频播放结束后隐藏语音栏
        audio.addEventListener('ended', () => {
          this.showVoiceBar = false;
        });
      },
      startSpeechRecognition() {
        navigator.mediaDevices.getUserMedia({ audio: true })
          .then(stream => {
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const source = audioContext.createMediaStreamSource(stream);
            const analyser = audioContext.createAnalyser();
            source.connect(analyser);
            analyser.fftSize = 256;
            const dataArray = new Uint8Array(analyser.frequencyBinCount);
            this.showVoiceInput = true;
            this.stream = stream;
            this.intervalId = setInterval(() => {
              analyser.getByteFrequencyData(dataArray);
              const average = dataArray.reduce((acc, cur) => acc + cur, 0) / dataArray.length;
              this.voiceInputStatus = average > 0 ? '当前正在进行语音输入...' : '未检测到声音，请大声一点';
            }, 1000);
            setTimeout(() => {
              this.voiceInputStatus = '语音转文字内容：我想要穿衣服';
              setTimeout(() => {
                this.stopSpeechRecognition();
              }, 2000);
            }, 3000);
          })
          .catch(error => {
            console.error('获取麦克风权限失败:', error);
          });
      },
      stopSpeechRecognition() {
        this.showVoiceInput = false;
        this.voiceInputStatus = '';
        if (this.intervalId) {
          clearInterval(this.intervalId);
          this.intervalId = null;
        }
        if (this.stream) {
          this.stream.getTracks().forEach(track => track.stop());
          this.stream = null;
        }
        if (this.$route.path !== '/about') {
          this.$router.push('/about');
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .play {
    position: relative; /* 设置为相对定位，用于子元素定位 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .video-container {
    width: 400px; /* 固定宽度 */
    height: 300px; /* 固定高度 */
    overflow: hidden; /* 隐藏视频超出容器的部分 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    }


  
  video {
    max-width: 100%; /* 视频最大宽度为容器宽度 */
    max-height: 90%; /* 视频最大高度为容器高度 */
    width: auto; /* 自动调整宽度 */
    height: auto; /* 自动调整高度 */
  }
  
  .play-button {
    left: 0; /* 左侧对齐 */
    right: 0; /* 右侧对齐 */
    margin: 0 auto; /* 水平居中 */
    z-index: 1; /* 确保按钮在视频之上 */
  }
  
  .centered-button {
    width: 250px; /* 调整按钮宽度为 250px */
    height: 250px; /* 调整按钮高度为 250px */
    margin-top: 40px; /* 将按钮顶部与上方元素的间距设置为 20px */
  }
  
  
  .voice-bar {
    position: fixed; /* 固定定位 */
    bottom: 20px; /* 距离页面底部 20px */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中 */
    background-color: #f0f0f0;
    padding: 10px 20px;
  }
  
  .voice-dialog {
    max-width: 90%;
    margin: 0;
    padding: 10px;
  }
  
  .voice-input-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .voice-icon {
    font-size: 48px;
    color: #409EFF;
  }
  
  .voice-text {
    margin-left: 20px;
    font-size: 18px;
  }
  
  @media (max-width: 768px) {
    .play-button {
      bottom: 10px; /* 按钮距离视频框底部 10px */
    }
  }
  </style>
  